<template>
  <div>
    <Card>
      <p slot="title">
        {{formValidate.id ? '编辑' : '新增'}}抽奖
      </p>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="200">
        <FormItem label="活动标题" prop="title">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.title" placeholder="请输入抽奖活动标题"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="封面图片">
          <Row>
            <Col span="12">
              <div class="demo-upload-list">
                <template v-if="formValidate.pic">
                  <img :src="formValidate.pic">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(formValidate.pic)"></Icon>
                  </div>
                </template>
              </div>

              <div class="upload-btn" @click="imageModal.isShow = !imageModal.isShow">
                <Icon type="ios-camera" size="20"></Icon>
              </div>

            </Col>
          </Row>
        </FormItem>

        <FormItem label="赞助商" prop="sponsor">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.sponsor" placeholder="请输入赞助商"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="跳转小程序APPID" prop="sponsor_appid">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.sponsor_appid" placeholder="请输入跳转小程序APPID"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="跳转路径" prop="sponsor_path">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.sponsor_path" placeholder="请输入跳转路径"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="开奖方式">
          <RadioGroup v-model="formValidate.open_type">
            <Radio label="1">定时</Radio>
            <Radio label="2">人数</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="开奖时间" v-if="formValidate.open_type === '1'">
          <Row>
            <Col span="4">
              <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.start_time" placeholder="开始时间"></DatePicker>
            </Col>
            <Col span="4">
              <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.end_time" placeholder="结束时间"></DatePicker>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="满N人开奖" v-if="formValidate.open_type === '2'">
          <Row>
            <Col span="12">
              <InputNumber :max="99999" :min="1" v-model="formValidate.open_num" style="width:100%"></InputNumber>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="奖品数量" prop="prize_num">
          <Row>
            <Col span="12">
              <InputNumber :max="99999" :min="1" v-model="formValidate.prize_num" style="width:100%"></InputNumber>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="指定中奖号码">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.appoint" type="textarea" :autosize="{minRows: 10}" placeholder="指定中奖号码"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="详细内容" prop="content">
          <Row>
            <Col span="12">
              <Editor id="content" v-model="formValidate.content"/>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="排序" prop="sort">
          <Row>
            <Col span="12">
              <InputNumber :max="999" :min="1" v-model="formValidate.sort" style="width:100%"></InputNumber>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="状态" prop="status">
          <RadioGroup v-model="formValidate.status">
            <Radio label="0">关闭</Radio>
            <Radio label="1">开启</Radio>
            <Radio label="2">结束</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">返回</Button>
        </FormItem>
      </Form>
    </Card>
    <ImageModal v-model="imageModal.isShow" @get-selection="imageSelect" :limit="1"></ImageModal>
    <Modal title="图片预览" v-model="visible" :styles="{top: '20%'}">
      <img :src="imgUrlView" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import ImageModal from '@/components/img-modal'
import Icons from '_c/icons'
import Editor from '_c/editor'
import { addLottery, editLottery, getLottery } from '@/api/lottery'
import { mapMutations } from 'vuex'

export default {
  name: 'lottery_edit',
  components: {
    Icons,
    ImageModal,
    Editor
  },
  data () {
    return {
      imageModal: {
        isShow: false
      },
      imgUrlView: '',
      visible: false,
      formValidate: {
        id: 0,
        title: '',
        pic: '',
        start_time: '',
        end_time: '',
        content: '',
        sort: 1,
        status: '1',
        sponsor: '',
        sponsor_appid: '',
        sponsor_path: '',
        open_type: '1',
        open_num: 1,
        appoint: '',
        prize_num: 1
      },
      ruleValidate: {
        title: [
          { required: true, message: '活动标题不能为空', trigger: 'blur' },
          { type: 'string', max: 64, message: '活动标题最大长度为64位', trigger: 'blur' }
        ],
        sponsor: [
          { type: 'string', max: 20, message: '赞助商最大长度为20位', trigger: 'blur' }
        ],
        sponsor_appid: [
          { type: 'string', max: 32, message: '跳转appid最大长度为32位', trigger: 'blur' }
        ],
        sponsor_path: [
          { type: 'string', max: 64, message: '跳转路径最大长度为64位', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    formValidate (val) {
      val.status = val.status.toString()
      val.open_type = val.open_type.toString()
      val.start_time = new Date(val.start_time * 1000)
      val.end_time = new Date(val.end_time * 1000)
      return val
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    // 预览
    handleView (item) {
      this.imgUrlView = item
      this.visible = true
    },
    handleChange (html, text) {
      this.formValidate.content = html
    },
    imageSelect (imageSelection) {
      this.formValidate.pic = imageSelection[0].thumb
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if(this.formValidate.id){
            editLottery(this.formValidate.id, this.formValidate).then(res => {
              if (res.code === 1) {
                this.$Message.success(res.msg)
                this.$refs[name].resetFields()
                this.back()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }else{
            addLottery(this.formValidate).then(res => {
              if (res.code === 1) {
                this.$Message.success(res.msg)
                this.$refs[name].resetFields()
                this.back()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        } else {
          this.$Message.error('操作失败!')
        }
      })
    },
    handleReset (name) {
      this.formValidate.id = 0
      this.$refs[name].resetFields()
      this.back()
    },
    back () {
      let { name, query, params, meta } = this.$route
      this.closeTag({ name, query, params, meta })
    }
  },
  beforeRouteEnter (to, from, next) {
    if (to.query.id !== undefined) {
      let { id } = to.query
      next(_this => {
        getLottery(id).then(res => {
          if (res.code === 1) {
            _this.id = id
            _this.formValidate = Object.assign({}, res.data)
          }
        })
      })
    } else {
      next(_this => {
        _this.formValidate.pic = ''
        _this.formValidate.start_time = new Date()
        _this.formValidate.end_time = new Date()
        _this.$refs['formValidate'].resetFields()
      })
    }
  }

}
</script>

<style>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .upload-btn {
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
    width: 58px;
    height:58px;
    line-height: 58px;
    display: inline-block;
  }
  #content{
    min-height: 400px;
  }
</style>
